<template>
  <div class="append-shop">
    <div class="append-shop-box">
      <div class="append-shop-box-list">
        <div class="append-shop-box-list-name">店铺名称:</div>
        <div class="append-shop-box-list-input">
          <el-input
            placeholder="不能超过30个字符"
            maxlength="30"
            v-model="shopDesignation"
            clearable
          >
          </el-input>
        </div>
      </div>
      <div class="append-shop-box-list">
        <div class="append-shop-box-list-name">店铺代号:</div>
        <div class="append-shop-box-list-input">
          <el-input
            placeholder="不能超过6个英文、数字"
            v-model="shopCode"
            clearable
          >
          </el-input>
        </div>
      </div>
      <div class="append-shop-box-list">
        <div class="append-shop-box-list-name">店铺站点:</div>
        <div class="append-shop-box-list-input">
          <el-select
            v-model="stationValue"
            @change="onChangeSelectSize"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in stationData"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="append-shop-box-list">
        <div class="append-shop-box-list-name"></div>
        <div class="append-shop-box-list-input">
          <el-checkbox-group v-model="checkedBox">
            <el-checkbox
              :label="checked.id"
              v-for="(checked, checkIdx) in checkedBoxData"
              :key="checkIdx"
              >{{ checked.country }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </div>
      <div class="append-shop-box-list">
        <div class="append-shop-box-list-name">Seller ID:</div>
        <div class="append-shop-box-list-input">
          <el-input
            placeholder="店铺授权后将自动获取"
            disabled
            v-model="shopSellerId"
            clearable
          >
          </el-input>
        </div>
      </div>
      <div class="append-shop-box-list">
        <div class="append-shop-box-list-name">ID:</div>
        <div class="append-shop-box-list-input">
          <el-input
            placeholder="店铺授权后将自动获取"
            disabled
            v-model="shopID"
            clearable
          >
          </el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Common from '@/api/common';
import Shop from '@/api/shop';
import Way from '@/utils/way';

export default {
  name: 'appendShop',
  components: {},
  props: {
    editShop: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      shopDesignation: '', // 店铺名称
      shopCode: '', // 店铺代号
      shopSellerId: '', // Seller ID
      shopID: '', // ID
      checkedBox: [], // 选择国家地址
      checkedBoxData: [], // 国家
      stationValue: '', // 店铺站点
      stationData: [], // 店铺站点列表
    };
  },
  computed: {},
  watch: {
    editShop(val) {
      if (Object.keys(val).length) {
        this.getCommonSiteList(this.editShop.site);
        this.setEditShop(val);
      } else {
        this.init();
      }
    },
  },
  created() {
    this.getCommonSiteList();
    if (Object.keys(this.editShop).length) {
      this.getCommonSiteList(this.editShop.site);
    }
    this.setEditShop(this.editShop);
  },
  methods: {
    // 设置编辑信息
    setEditShop(val) {
      if (Object.keys(val).length) {
        this.shopDesignation = val.title;
        this.shopCode = val.shop_code;
        this.stationValue = val.site;
        this.checkedBox = Way.strArrToNumber(val.country.split(','));
      } else {
        this.init();
      }
    },
    // 获取区域
    getCommonSiteList(key = '') {
      const that = this;
      const param = {
        site: key,
      };
      Common.getCommonSiteList(param).then((res) => {
        console.log(res);
        if (res.code == 200) {
          if (key == '') {
            that.stationData = res.data;
          } else {
            const rows = res.data.rows;
            rows.forEach((oj) => {
              oj.isShow = false;
            });
            that.checkedBoxData = rows;
          }
        } else {
          Way.setMessage(res.msg, 3);
        }
      });
    },

    // 店铺站点change事件
    onChangeSelectSize(val) {
      this.getCommonSiteList(val);
    },

    // 增加店铺
    onAddShopList() {
      const that = this;
      const country = this.checkedBox.length ? this.checkedBox.join(',') : '';
      if (this.shopDesignation == '') {
        return Way.setMessage('店铺名称不能为空', 2);
      }
      if (this.shopCode == '') {
        return Way.setMessage('店铺代号不能为空', 2);
      }

      const params = {
        title: this.shopDesignation,
        shop_code: this.shopCode,
        site: this.stationValue,
        country: country,
      };
      console.log(params);
      let shopAddEdit = () => {},
        shopMsg = '';
      if (Object.keys(this.editShop).length) {
        params.id = this.editShop.id;
        shopAddEdit = Shop.postShopEdit;
        shopMsg = '修改店铺成功';
      } else {
        shopAddEdit = Shop.postShopAdd;
        shopMsg = '增加店铺成功';
      }
      shopAddEdit(params).then((res) => {
        console.log(res);
        if (res.code == 200) {
          Way.setMessage(shopMsg, 1);
          if (Object.keys(this.editShop).length) {
            this.$emit('closeShopDialog', false, 2);
          } else {
            this.$emit('closeShopDialog', false, 1);
          }
          this.init();
        } else {
          Way.setMessage(res.msg, 3);
        }
      });
    },

    // 初始化数据
    init() {
      this.shopDesignation = '';
      this.shopCode = '';
      this.stationValue = [];
      this.checkedBox = [];
      this.checkedBoxData = [];
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
.append-shop {
  .append-shop-box {
    .append-shop-box-list {
      display: flex;
      align-items: center;
      margin-bottom: 12px;

      .append-shop-box-list-name {
        width: 80px;
        padding-right: 12px;
        text-align: right;
      }

      .append-shop-box-list-input {
        flex: 1;

        .el-select {
          width: 100%;
        }
      }
    }
  }
}
</style>
